<template>
  <canvas id="lime-painter"></canvas>
  <div
    style="
      height: 160px;
      padding-top: 40px;
      background: radial-gradient(rgba(0, 0, 0, 0) 5%, #0ff 15%, #f0f 60%);
    "
  >
    <!-- <div style="height: 160px; width: 80%; margin: 0 auto; background: linear-gradient(-76deg,#000 0%, #ff5000 100%)"></div> -->
  </div>
  <img :src="path" alt />
</template>

<script>
// import { Painter } from "./painter";
import { Painter } from "../../../src/index";
import {
  base64,
  image,
  text,
  test,
  poster2,
  poster,
  test3,
  test4,
  posterOption,
  path,
  schema,
  schema2,
  schema3,
} from "./data";
export default {
  data() {
    return {
      path: "",
    };
  },
  async mounted() {
    const canvas = document.querySelector("#lime-painter");
    const context = canvas.getContext("2d");
    const pixelRatio = window.devicePixelRatio;
    const painter = new Painter({
      id: "lime-painter",
      context,
      canvas,
      pixelRatio,
      width: canvas.offsetWidth,
      height: canvas.offsetHeight,
      listen: {
        onProgress(v) {
          // console.log('进度：', v)
        },
        onEffectSuccess(v) {
          console.log("onEffectSuccess", v);
        },
        onEffectFail(v) {
          console.log("onEffectFail", v);
        },
      },
    });
    const a = {
      css: {
        width: "750rpx",
        height: "750rpx",
        background: "red",
        backgroundImage: `url(${base64})`,
        padding: "50px",
      },
      views: [
        {
          type: "image",
          src: base64,
          css: {
            width: "100%",
          },
        },
      ],
    };
    await painter.source(a);
    painter
      .render()
      .then((res) => {
        // console.log(res)
      })
      .catch((res) => {
        // console.log('err', res)
      });
    // this.path = painter.save();
  },
};
</script>

<style scoped>
#lime-painter {
  width: 100%;
  height: 100%;
}
</style>
